<template>
  <div>
    <div class="flexBet t">
      <div class="t1">
        <div class="t1_1">用户使用情况看板</div>
        <div class="t1_2">(更新时间：2023年4月10日 10:48)</div>
      </div>
      <div class="t2">
        <div class="t2_1 flex">
          <div
            class="block"
            style="background-color: rgba(241, 244, 249, 1)"
          ></div>
          <div class="txt">总账号数量</div>
        </div>
        <div class="t2_1 flex">
          <div
            class="block"
            style="background-color: rgba(39, 196, 120, 1)"
          ></div>
          <div class="txt">今日已登录账号数量</div>
        </div>
      </div>
    </div>
    <div id="lineChart" style="width: 70vw;height: 70vh;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'schoolMonitoring',

  data() {
    return {}
  },

  mounted() {
    let lineChart = echarts.init(document.getElementById('lineChart'))
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: '0',
        left: '50',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
      },
      series: [
        {
          name: '总账号数量',
          type: 'bar',
          data: [18203, 23489, 29034, 104970, 131744, 630230],
          itemStyle: {
            color: 'rgba(241, 244, 249, 1)'
          }
        },
        {
          name: '今日已登录账号数量',
          type: 'bar',
          data: [19325, 23438, 31000, 121594, 134141, 681807],
          itemStyle: {
            color: 'rgba(39, 196, 120, 1)'
          }
        }
      ]
    }
    lineChart.setOption(option)
  },

  methods: {}
}
</script>

<style lang="scss" scoped>
.t {
  padding: 50px 100px 20px 70px;

  .t1 {
    .t1_1 {
      font-size: 20px;
      font-weight: 400;
      color: rgba(39, 196, 120, 1);
    }

    .t1_2 {
      font-size: 12px;
      font-weight: 400;
      margin-top: 2px;
      color: rgba(166, 166, 166, 1);
    }
  }

  .t2 {
    .t2_1 {
      margin-top: 20px;

      .block {
        width: 22px;
        height: 22px;
        border-radius: 2px;
        margin-right: 15px;
      }

      .txt {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: rgba(128, 128, 128, 1);
      }
    }
  }
}
</style>
